<template>
    <div>
        <div style="display: flex" class="my-2">
            <div class="card mx-2 py-2" ref="pie" style="width: 50%;height: 400px;"></div>
            <div class="card mx-2 py-2" ref="bar" style="width: 50%; height: 400px;"></div>
        </div>
        <el-card >
            <el-space direction="vertical">
                <h1>最近更新</h1>
                <el-timeline style="max-width: 600px">
                    <el-timeline-item :timestamp="formattedPublishTime(item.createTime)" color="#0bbd87" placement="top"
                                      v-for="item in data.noticeData">
                        <h4>{{ item.title }}</h4>
                        <p>{{ item.content }}</p>
                    </el-timeline-item>
                </el-timeline>
            </el-space>
        </el-card>
    </div>
</template>

<script setup>
import myAxios from "@/axios/axios.js";
import {ElMessage} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import {formattedPublishTime} from "@/tools/date.js";
import * as echarts from "echarts"
// 表格数据及分页信息
const data = reactive({
    noticeData: [],
});
onMounted(() => {
    load();
    loadPie();
    loadBar();
})
const loadPie = () => {
    myAxios.get("/echarts/pie").then(res => {
        if (res.code === 0 && res.data) {
            const chartInstance = echarts.init(pie.value);
            pieOption.series[0].data = res.data;
            chartInstance.setOption(pieOption);
        } else {
            ElMessage.error("数据加载失败");
        }
    }).catch(error => {
        ElMessage.error("网络请求出错，请稍后重试");
    })
}
const pie = ref(null);
const pieOption = {
    title: {
        text: '不同分类下用户发布文章的数量',
        subtext: '统计维度：攻略分类',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: [
                {value: 1, name: '公告发布趋势1'},
                {value: 10, name: '公告发布趋势2'},
                {value: 100, name: '公告发布趋势3'},
                {value: 21, name: '公告发布趋势4'},
                {value: 41, name: '公告发布趋势5'},
            ]
        }
    ]
};
const loadBar = () => {
    myAxios.get("/echarts/bar").then(res => {
        if (res.code === 0 && res.data) {
            const chartInstance = echarts.init(bar.value);
            barOption.xAxis.data = res.data.xAxis;
            barOption.series[0].data = res.data.yAxis;
            chartInstance.setOption(barOption);
        } else {
            ElMessage.error("数据加载失败");
        }
    }).catch(error => {
        ElMessage.error("网络请求出错，请稍后重试");
    })
}
const bar = ref(null);
const barOption = {
    title: {
        text: '不同用户发布文章的数量',
        subtext: '统计维度：攻略分类',
        left: 'center'
    },
    grid:{
        bottom:'30%'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Thu', 'Fri', 'Sat', 'Sun'],
        name: '攻略分类',
        axisLabel: {
            interval: 0,
            rotate: -60,
            show: true,
            inside:false,
            margin:6
        }
    },
    yAxis: {
        type: 'value'
    },
    tooltip: {
        trigger: 'item',
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            data: [1, 10, 100, 21, 41],
            type:'bar',
        }
    ]
}
const load = async () => {
    try {
        const res = await myAxios.get("/notice/list/page/vo");
        if (res.code === 0 && res.data) {
            data.noticeData = res.data.records;
        } else {
            ElMessage.error("数据加载失败");
        }
    } catch (error) {
        ElMessage.error("网络请求出错，请稍后重试");
        console.error("数据加载出错:", error);
    }
};
</script>

<style scoped>

</style>